<template>
    <div style="overflow: auto;height: 710px;">
    <div class="form-box">
        <el-form ref="form" :model="form" label-position="left" label-width="180px">
            
            <el-form-item label="投资类型" >
                <el-select v-model="progress" @change="onChange()">
                    <el-option v-for="item in progressItems" :key="item.value" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
        
            <el-form-item label="进度年月">
                <el-date-picker  type="month"  v-model="currentDate" placeholder="选择日期" class="dateWidth" value-format="yyyy/MM">
                </el-date-picker>
            </el-form-item>
               
            <el-form-item label="建设内容">
                <el-input type="textarea" row="4" v-model="form.consContent" ></el-input>
            </el-form-item>
            <el-form-item label="开工日期" >
                <el-date-picker  type="date"  v-model="startWorkTime" placeholder="选择日期" class="dateWidth" value-format="yyyy/MM/dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="施工单位" >
                    <el-input v-model="form.implementOrg" ></el-input>
            </el-form-item>
            <el-form-item label="进度计划完成投资(万元)" >
                    <el-input v-model="form.planInvestment" type="number"></el-input>
            </el-form-item>   `
            <el-form-item label="进度计划形象进度" >
                    <el-input type="textarea" row="4" v-model="form.planImage"></el-input>
            </el-form-item>  
            <el-form-item label="月累计完成投资(万元)" >
                    <el-input v-model="form.ljInvestment" type="number"></el-input>
            </el-form-item>               
            <el-form-item label="工程形象进度">
                <el-input type="textarea" row="4" v-model="form.ljImage" ></el-input>
            </el-form-item>
            <el-form-item label="单月完成投资(万元)" >
                    <el-input v-model="form.realInvestment" type="number"></el-input>
            </el-form-item>
            <el-form-item label='上传凭证' v-if='form.realInvestment>500'>
                <el-upload class="avatar-uploader" :auto-upload='blFalse' action='' :show-file-list="false" :on-change="pzUrlChange" >
                    <img v-if="pzUrl" :src="pzUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="手续办理情况">
                <el-input type="textarea" row="4" v-model="form.sxBlqk" ></el-input>
            </el-form-item>     
            <el-form-item label="推进中的问题">
                <el-input type="textarea" row="4" v-model="form.problems"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" row="4" v-model="form.note"></el-input>
            </el-form-item>
            <el-row :gutter="20">
                <div class="commit-btn">
                    <el-button type="primary"  v-on:click="submit()">提交</el-button>
                </div>
            </el-row>
        </el-form>
    </div>
    </div>
</template>
<script>
import date_formate from "../tool/Global/dateutil.js";
import {
  projectType,
  projectProgress,
  ServiceConfig
} from "../tool/Global/app-config.js";
import {
  deleteProjectMedia,
  queryProjectMediaByScheduleid,
  addProjectMedia,
  queryProMonthScheduleByPkid,
  addProMonthSchedule,
  updateProMonthSchedule
} from "../tool/Global/app-mgr.js";
export default {
  props: ["projectId", "progressId", "userInfo"],
  data: function() {
    return {
      progressItems: projectProgress,
      form: {
        pkid: "",
        projectID: "",
        currentStage: "",
        consContent: "",
        implementOrg: "",
        problems: "",
        planInvestment: "",
        planImage: "",
        note: "",
        createPersonID: "",
        createPerson: "",
        ljInvestment: "",
        ljImage: "",
        realInvestment: "",
        sxBlqk: ""
      },
      currentDate: "",
      startWorkTime: "",
      progress: "",
      pzFile: null,
      pzUrl: "",
      blFalse: false,
      mediaPkid: ""
    };
  },
  mounted: function() {
    let ref = this;
    ref.form.createPersonID = ref.userInfo.createPersonID;
    ref.form.createPerson = ref.userInfo.createPerson;
    ref.form.projectID = ref.projectId;
    this.$nextTick(function() {
      if (ref.progressId) {
        ref.form.pkid = ref.progressId;
        queryProMonthScheduleByPkid(ref.progressId).then(function(result) {
          if (result.data.success) {
            let data = result.data.data;
            for (var key in ref.form) {
              ref.form[key] = data[key] != null ? data[key] : "";
            }
            ref.progress = ref.form.currentStage
              ? ref.progressItems[ref.form.currentStage - 1].name
              : "";
            ref.currentDate = data.currentDate
              ? date_formate.format(new Date(data.currentDate), "yyyy/MM")
              : "";
            ref.startWorkTime = data.startWorkTime
              ? date_formate.format(new Date(data.startWorkTime), "yyyy/MM/dd")
              : "";
          }
        });
        queryProjectMediaByScheduleid(ref.progressId, { mediaType: 9 }).then(
          function(result) {
            if (result.data.data.total) {
              var data = result.data.data.datalist[0];
              ref.pzUrl = ServiceConfig.archiveUrl + "/" + data.mediaID;
              ref.mediaPkid = data.pkid;
            }
          }
        );
      }
    });
  },
  methods: {
    submit() {
      var data = {
        proMonthScheduleStr: JSON.stringify(this.form),
        currentDate: this.currentDate,
        startWorkTime: this.startWorkTime
      };
      let ref = this;
      let params = new URLSearchParams();
      for (var key in data) {
        params.append(key, data[key]);
      }
      if (this.progressId) {
        updateProMonthSchedule(params).then(function(result) {
          if (result.data.success) {
            if (ref.pzFile) {
              if (ref.mediaPkid) {
                deleteProjectMedia(ref.mediaPkid).then(function(result) {
                  if (result.data.success) {
                    var uploadFormData = new FormData();
                    uploadFormData.append(
                      "projectMedia",
                      JSON.stringify({
                        scheduleID: ref.progressId,
                        mediaType: 9
                      })
                    );
                    uploadFormData.append("file", ref.pzFile.raw);
                    addProjectMedia(uploadFormData).then(function(result) {
                      if (result.data.success) {
                        ref.$message({ message: "更新成功", type: "success" });
                        ref.$emit("listenClose");
                      } else {
                        ref.$message.error(result.data.message);
                      }
                    });
                  }
                });
              } else {
                var uploadFormData = new FormData();
                uploadFormData.append(
                  "projectMedia",
                  JSON.stringify({ scheduleID: ref.progressId, mediaType: 9 })
                );
                uploadFormData.append("file", ref.pzFile.raw);
                addProjectMedia(uploadFormData).then(function(result) {
                  if (result.data.success) {
                    ref.$message({ message: "更新成功", type: "success" });
                    ref.$emit("listenClose");
                  } else {
                    ref.$message.error(result.data.message);
                  }
                });
              }
            } else {
              ref.$message({ message: "更新成功", type: "success" });
              ref.$emit("listenClose");
            }
          } else {
            ref.$message.error(result.data.message);
          }
        });
      } else {
        addProMonthSchedule(params).then(function(result) {
          if (result.data.success) {
            if (ref.pzFile) {
              var pkid = result.data.data.pkid;
              var uploadFormData = new FormData();
              uploadFormData.append(
                "projectMedia",
                JSON.stringify({ scheduleID: pkid, mediaType: 9 })
              );
              uploadFormData.append("file", ref.pzFile.raw);
              addProjectMedia(uploadFormData).then(function(result) {
                if (result.data.success) {
                  ref.$message({ message: "添加成功", type: "success" });
                  ref.$emit("listenClose");
                } else {
                  ref.$message.error(result.data.message);
                }
              });
            } else {
              ref.$message({ message: "添加成功", type: "success" });
              ref.$emit("listenClose");
            }
          } else {
            ref.$message.error(result.data.message);
          }
        });
      }
    },
    onChange() {
      for (var i = 0; i < this.progressItems.length; i++) {
        if (this.progress == this.progressItems[i].name) {
          this.form.currentStage = this.progressItems[i].value;
        }
      }
    },
    pzUrlChange(file) {
      console.log(file);
      if (file.raw.type == "image/png" || file.raw.type == "image/jpg" || "image/jpeg") {
        this.pzFile = file;
        this.pzUrl = file.url;
      } else {
        this.$message({ message: "请上传png或jpg格式的图片", type: "error" });
      }
    }
  }
};
</script>
<style scoped>
.commit-btn {
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #dcdfe6;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


